// 轮播图
let swiper = new Swiper("#swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    loop: true,
    autoplay: {
        delay: 1000,
        // pauseOnMouseEnter: true,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true
    },
    effect: "slide",
})

// 鼠标移入停止自动切换
swiper.el.onmouseover = function() {
        swiper.autoplay.stop();
    }
    // 鼠标移出开始自动切换
swiper.el.onmouseout = function() {
        swiper.autoplay.start();
    }
    // ---- 4 wiper 滑 块 ---------------
let swiper2 = new Swiper("#swiper2", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    loop: true,
    autoplay: {
        delay: 1000,
        // pauseOnMouseEnter: true,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true
    },
    effect: "slide",
    slidesPerView: 4,
    slidesPerGroup: 4,
    spaceBetween: 20,
})

// 鼠标移入停止自动切换
swiper2.el.onmouseover = function() {
        swiper.autoplay.stop();
    }
    // 鼠标移出开始自动切换
swiper2.el.onmouseout = function() {
    swiper.autoplay.start();
}
$(function() {

    // -----------模 糊 搜 索--------------------
    let $search_ipt = $("#search");
    let $list_ele = $("#list");
    // $search_ipt.foucs(function(){

    // })
    $search_ipt.on("keyup", function() {
        // console.log($search_ipt.val());
        // $list_ele.css({
        //     display : "block",
        // })
        if ($search_ipt.val()) {
            $list_ele.css({
                display: "block",
            })
        } else {
            $list_ele.css({ display: "none" });
        }

        $.ajax({
            url: "https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=" + $search_ipt.val() + "&cb=callback",
            dataType: "jsonp",
            jsonp: "cb",
            success: function(res) {
                // console.log(res);
                if (res.g instanceof Array) {
                    let html = res.g.map(function(item) {
                        return `<li>${item.q}</li>`
                    }).join("");
                    $list_ele.html(html);
                } else {
                    $list_ele.html("");
                }
            }
        })
    });
    $search_ipt.on("blur", function() {
        $list_ele.css({
            display: "none",
        })
    });
    // -------top 菜 单 吸 顶 效 果 ---------------
    let $top = $(".header_ul1");
    let $top_ul = $(".header_ul1>ul");
    let $img = $(".imgli");

    $(window).on("scroll", function() {
        antishake(100);
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (scrollTop > 42) {
            $top.css({
                "position": "fixed",
                "top": "0",
                "height": "56px",
                "lineHeight": "56px",
            });
            $top_ul.css({ "height": "56px" });
            $img.css({
                "display": "inline-block",
                "position": "absolute",
                "left": 0
            })
        } else {
            $top.css({
                "position": "static",
                "height": "42px",
                "lineHeight": "42px",
            });
            $top_ul.css({ "height": "42px" });
            $img.css({ "display": "none" })
        }

    })

    let antishake = (function() {
        let t = null;
        return function(daley) {
            clearTimeout(t);
            t = setTimeout(() => {
                // console.log("函数防抖封装");
            }, daley);
        }
    })();
    //  联系我们
    let $shop_li = $(".header_shop");
    let $goshop = $(".goshop");
    $shop_li.on("mouseover", function() {

        $goshop.show();
    })
    $goshop.on("mouseover", function() {
        $goshop.show();
    })
    $goshop.on("mouseout", function() {

        $goshop.hide();
    })
    $shop_li.on("mouseout", function() {

        $goshop.hide();
    })

    //   ------- json 数 据 渲 染 ------------
    $(document).ready(function() {
        let options = {
            url: "./static/data.json",
            type: "GET",
            datatype: "json",
            success: function(res) {
                // console.log(res);
                render(res);
            },
            error: function(xhr) {
                console.log(xhr);
            }
        }
        $.ajax(options);
    })

    function render(arr) {
        // console.log(arr);
        let ul = document.querySelector(".bd");
        ul.innerHTML = arr.data.map(item => `
                <section class="bd_content">
                    <div class="bd_title">
                        ${item.title}
                    </div>
                    <div class="bd_contents_img">
                        <section>
                                <img class="img" src="${item.img1}"  border="0">
                        </section>
                        <section>
                                <img class="img" src="${item.img2}" border="0">
                                <section class="bd_input">
                                    <a href="javascript:void(0);">
                                            <button class="uikit_link">
                                                ${item.end}
                                            </button>
                                    </a>
                                </section>
                        </section>
                    </div>
                </section>
        `);
        let only = document.querySelector(".bd_only_box");
        only.innerHTML = arr.data2.map(item => `
            <div class="bd_only">
                <section>
                    <div class="bd_title">
                            ${item.name}
                    </div>
                    <div class="bd_contents_img">
                            <section>
                                <img class="img" src="${item.img}">
                            </section>
                            <section class="bd_input">
                                <a href="javascript:void(0);">
                                        <button class="uikit_link">
                                            ${item.end}
                                        </button>
                                </a>
                            </section>
                    </div>
                </section>
            </div>
        `)
    };
    // ----------- stairs 楼 梯 ------------------------
    let $stairs = $(".stairs_btn");
    let $section = $(".content_box .section");
    $(window).on("scroll", function() {
            let scrollTop = $("html,body").scrollTop();
            // 控制按钮的显示隐藏; 
            starisBtnToggle(scrollTop);
            // 根据scrollTop设置按钮的下标; 
            setStairsButtonIndex(scrollTop);
        })
        // 控制按钮的显示隐藏; 
    function starisBtnToggle(scrollTop) {
        if (scrollTop > 900) {
            $stairs.show();
        } else {
            $stairs.hide();
        }
    }
    // 根据scrollTop设置按钮的下标; 

    let section_top_list = [];
    for (let i = 0; i < $section.length; i++) {
        section_top_list.push($section.eq(i).offset().top)
    }

    let $stairs_btn = $(".stairs_btn li")

    function setStairsButtonIndex(scrollTop) {
        // 1. 如果小于了数组的第0项下标是1; 
        // 2. 如果大于前一项并且小于后一项; 下标就是前一项;  
        // 3. 如果大于最后一项那么下标就是数组的长度减一; 
        $stairs_btn.eq(getButtonIndex(scrollTop)).addClass("active")
            .siblings()
            .removeClass("active")
    }

    function getButtonIndex(scrollTop) {
        // 如果scrollTop 小于第0项那么我们就返回下标0;
        if (section_top_list[0] >= scrollTop) {
            return 0;
            // 如果scrollTop 大于最后一项我们就返回最后一项下标; 
        } else if (section_top_list[section_top_list.length - 1] <= scrollTop) {
            return section_top_list.length - 1
        } else {
            // 如果scrollTop 大于前一项且小于后一项那么我们就返回当前项的下标; 
            for (let i = 0; i < section_top_list.length - 1; i++) {
                if (scrollTop >= section_top_list[i] && scrollTop < section_top_list[i + 1]) {
                    return i;
                }
            }
        }
    }

    // 因为在页面刷新时，某些时候不会触发window.scroll事件, 这时候我们应该去主动触发一下这个事件确保元素能正确的显示或者隐藏; 
    $(window).trigger("scroll");

    // 点击按钮让页面跳转到对应的楼层 : 
    // - 就是让我们的scrollTop 跳转到对应的值; 
    // - 事件 : 按钮点击事件; 

    $(".stairs_btn li").click(function() {
        // 1. 找到元素下标; 
        let index = $(this).index(".stairs_btn li");
        // 2. 根据下标找到对应的楼层;获取楼层高度 , 图片不能撑起元素高度;  
        //   let _top = $section.eq( index ).offset().top;
        if (index < $(".stairs_btn li").length - 1) {
            let _top = $section.eq(index).offset().top;
        } else {
            let _top = 0;
        }
        // 3. 给window设置高度让其滚动到对应的scrollTop 位置; 
        //   console.log(_top);
        console.log(index);
        $("html,body").stop(true).animate({
            scrollTop: _top
        });

    });
    // 图片懒加载
    // let $imgAll = $("img");

    // data-original
    // $(".img").attr("src");
    // console.log( $imgAll );

    // for(let i = 0; i < $imgAll.length; i++){
    //     $imgAll[i].attr("src");
    //     console.log($imgAll[i].attr("src"));
    // }

    // console.log($imgAll.attr("src"));
    // $imgAll.attr("data-img" , $(".img").attr("src"));
    // $imgAll.removeAttr("src");
    // $("img").addClass("img");

    // $(window).ready(function(){


    // })
    window.onload = function() {
        $(".img").lazyload();
    }



})